<script setup lang="ts">
import { CREATE_DYNAMIC_FAIL } from '../common/constants/toast'
import { DynamicFormField, DynamicFormRules } from '@/common/form-config'
import { PagePath, PageTitle } from '@/common/constants'
import hopeForms from '@/common/components/hope-forms.vue'
import { createDynamicService } from '@/common/service/dynamic'
import type { CreateDynamicParams } from '@/common/types/dynamic'
import type { FormOnSubmit } from '@/common/types/form'

const hopeFormRef = ref<InstanceType<typeof hopeForms>>()

/** 表单提交事件 */
const onSubmit: FormOnSubmit = ({ isVerify, value }) => {
  if (isVerify) {
    createDynamicService((value as CreateDynamicParams)).then(() => {
      showSimpleToast(CREATE_DYNAMIC_SUCCESS)
      goToPage(PagePath.MY_LIST_DYNAMIC)
    }).catch(() => {
      showSimpleToast(CREATE_DYNAMIC_FAIL)
      goToSwitchTab(PagePath.HOME)
    })
  }
}

const createDynamic = () => {
  hopeFormRef.value?.onSubmit()
}
</script>

<template>
  <view class="dynamic-create-container">
    <hope-nav-bar :title="PageTitle.CREATE_DYNAMIC" is-back-icon />
    <view class="dynamic-create-scroll-container">
      <scroll-view class="dynamic-create-scroll-content">
        <view class="dynamic-create-form">
          <hope-forms
            ref="hopeFormRef" :fields="DynamicFormField" :rules="DynamicFormRules" label-position="top" label-width="100%"
            @on-submit="onSubmit"
          />
        </view>
      </scroll-view>
    </view>
    <view class="dynamic-create-bottom" @click="createDynamic">
      <hope-button title=" 创建动态" @on-click="() => goToPage(PagePath.CREATE_DYNAMIC)" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.dynamic {
  &-create {

    &-textarea {
      width: 100%;
      height: 200rpx;
    }

    &-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    &-scroll {
      &-container {
        flex: 1;
        overflow: scroll;
      }

      &-content {
        height: 100%;
        background-color: $color-white;
      }
    }

    &-form {
      display: flex;
      padding: $padding-base;
      flex-direction: column;
    }

    &-item {
      display: flex;
      flex-direction: column;
      padding-block: $padding-base;

      &-img {
        display: flex;
        justify-content: center;
        gap: $padding-base;
      }
    }

    &-bottom {
      background-color: $color-white;
      padding-inline: $padding-base;
      padding-top: 16rpx;
      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    }
  }
}
</style>
